---
import External from '/components/icons/External.astro'
import type { HTMLAttributes } from 'astro/types'

export interface Props extends HTMLAttributes<'a'> {}
const { href, class: cls, ...props } = Astro.props

const url = Astro.url
const isExternal = href ? new URL(href, url.origin).origin !== url.origin : false
---

<a {href} {...props} class:list={[cls, 'group/link']} target={isExternal ? '_blank' : ''}>
	<slot />{
		/* prettier-ignore */
		isExternal && <span class="whitespace-nowrap"><External class="inline-block  h-[1em] no-underline transition group-hover/link:-translate-y-px group-hover/link:translate-x-px" /></span>
	}</a
>
